<template>
    <div class="edit">
        <div>
            <span>教师ID：</span>
            <el-input v-model.number="tid" placeholder="请输入教师ID" style="width:20%" clearable @clear="handleClear"></el-input>
            <el-button class="searchbtn" type="primary" icon="el-icon-search" @click="getData">查询</el-button>
        </div>

        <el-dialog :visible.sync="dialogFormVisible" :before-close="handleClose">
        <el-form :model="form">
            <el-form-item label="评语" label-width="120" prop="remark">
              <el-input autosize type="textarea" v-model="form.remark" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="handleCancle">取 消</el-button>
          <el-button type="primary" @click="handleForm">确 定</el-button>
        </div>
    </el-dialog>
        <el-table
    :data="list"
    style="width: 100%;margin-top: 10px;"
    height="620"
    border="1"
    stripe="1"
    >
    
    <el-table-column
      type = "expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="德育成绩">
            <span>{{ props.row.virtue }}</span>
          </el-form-item>
          <el-form-item label="智育成绩">
            <span>{{ props.row.intelligence }}</span>
          </el-form-item>
          <el-form-item label="体育成绩">
            <span>{{ props.row.sports }}</span>
          </el-form-item>
          <el-form-item label="美育成绩">
            <span>{{ props.row.art }}</span>
          </el-form-item>
          <el-form-item label="劳育成绩">
            <span>{{ props.row.labor }}</span>
          </el-form-item>
          <el-form-item label="教师姓名">
            <span>{{ props.row.teacher.username }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>

    <el-table-column
      prop="sid"
      label="学号"
      width="120">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>


    <!-- <el-table-column
      prop="virtue"
      label="德育成绩"
      width="80">
    </el-table-column>
    <el-table-column
      prop="intelligence"
      label="智育成绩"
      width="80">
    </el-table-column>
    <el-table-column
      prop="sports"
      label="体育成绩"
      width="80">
    </el-table-column>
    <el-table-column
      prop="art"
      label="美育成绩"
      width="80">
    </el-table-column>
    <el-table-column
      prop="labor"
      label="劳育成绩"
      width="80">
    </el-table-column> -->
    <el-table-column
      prop="totalScore"
      label="总评成绩"
      width="120">
    </el-table-column>
    <el-table-column 
      prop="remark"
      label="评语"
      width="480"
      show-overflow-tooltip>  
    </el-table-column>
    <!-- <el-table-column
      prop="teacher.username"
      label="教师名称"
      width="120"
      >
    </el-table-column> -->
    
    <el-table-column
      label="操作"
      width="360">
      <template slot-scope="scope">
        <el-button
        type="primary" 
          @click.native.prevent="handleUpdate(scope.row)"
          >
          编辑
        </el-button>
        <el-button
        type="danger" 
          @click.native.prevent="$event => handleDelete(scope.row.id)"
          >
          删除
        </el-button>
        <el-button
        type="primary"
          size="small"
          @click.native.prevent="$event => handleGenerateRemark(scope.row)"
          >
          生成评语
        </el-button>
      </template>
    </el-table-column>
  </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      background
      class="pagination"
      >
    </el-pagination>
    
    </div>
</template>

<script>
import request from "@/utils/re_request"
import { Message } from "element-ui"
export default {
    name:'class',
    data(){
        return {
            tid:'',
            pageSize:10,
            currentPage: 1,//当前页
            total: 0,//总记录数
            // 原数据
            data:[],
            // 展示数据
            list:[],
            // 是否显示对话框
            dialogFormVisible:false,
            // 表单
            form:{
                id:'',
                remark:'',
            },
            // 操作得学生ID
            operationId:'',
        }
    },
    methods:{
        // 查询教师ID对应得学生数据
        getData() {
            request.get(`/performance/class?tid=${this.tid}`).then(
                response => {
                    if(response.code === 600) {
                        this.data = response.data
                        this.list = response.data.slice(0, this.pageSize)
                        this.total = response.count
                    }
                }
            )
        },
        // 清除
        handleClear() {
            this.data = []
        },
        // 当前页变化
        handleCurrentChange(currentPage) {
          this.currentPage = currentPage
          this.list = this.data.slice(this.pageSize * (currentPage - 1), this.pageSize * currentPage)
        },
        // 页面大小更新
        handleSizeChange(pageSize) {
          this.currentPage = 1
          this.pageSize = pageSize
          this.list = this.data.slice(0, pageSize)
        },
        // 处理学生表现数据更新
        handleUpdate(item) {
          this.operationId = item.id
          // 开启对话框
          this.dialogFormVisible = true

          // 填充数据
          this.$nextTick(()=>{
            this.form.remark = item.remark
	      })

        },
        // 处理从下方的取消 确定关闭对话框
        handleCancle() {
          // 关闭对话框
          this.dialogFormVisible = false

          // 清空表单中的值并重置isEdit和totalScore
          this.$refs["form"].resetFields()
          this.isEdit = false
          this.totalScore = ''
        },
        // 处理从右上角的的×关闭对话框
        handleClose(done){
          this.$confirm('确认关闭？')
          .then(_ => {
            this.handleCancle()
            done();
          })
          .catch(_ => {});
        },
        handleForm() {
          // 关闭对话框
          this.dialogFormVisible = false
          // 根据isEdit处理逻辑
          // 后端处理
            request.put('/remark/update', {
              id: this.operationId,
              remark: this.form.remark,
            }).then(
              response => {
                if(response.code === 600) {
                  // 前端更新
                  this.getData()
                  Message.success(response.msg)
                }
              }
            )
          // 重置form和isEdit
          // 清空表单中的值
          this.$refs["form"].resetFields()
        },
        // 删除评价
        handleDelete(id) {
            this.$confirm('确认删除该学生的评价吗？')
          .then(_ => {
            request.put('/remark/update', {
              id: id,
              remark: '',
            }).then(
              response => {
                if(response.code === 600) {
                  // 前端更新
                  this.getData()
                  Message.success(response.msg)
                }
              }
            )
          })
        },
        // 生成评语
        handleGenerateRemark(item) {
          if(item.remark.trim().length > 0) {
            Message.warning("评语已存在，不能生成！")
          } else {
            request.get(`/remark/generate?id=${item.id}`).then(
              response => {
                if(response.code === 600) {
                  this.getData()
                  Message.success(response.msg)
                } 
              }
            )
          }


        }
    }
}
</script>

<style>
.edit{
    margin: 30px 50px 0 50px;
}

.pagination {
    margin-left: 30%;
    font-size: 14px;
}
.demo-table-expand {
    font-size: 0;
}
.demo-table-expand label {
    width: 90px;
    color: #000000;
}
.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 30%;
}
</style>